<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .aa {
      background: pink;
    }
  </style>
</head>

<body>

  <div id="app"></div>

  <!-- react核心库 -->
  <script src="../js/react.development.js"></script>
  <!-- react DOM库 -->
  <script src="../js/react-dom.development.js"></script>
  <!-- babel用于将jsx转化为js -->
  <script src="../js/babel.min.js"></script>
  <!-- 表示不是js 而是jsx 通过babel -->
  <script type="text/babel">
    const myId = "titles"
    const mydata = "hello,world!"
    // 创建虚拟dom
    const VDOM = (
      <div>
        <h1 className="aa" id={myId}>
          <span style={{ color: 'red', fontSize: '50px' }}>{mydata}</span>
        </h1>
        <input type="text" />
        <Good>123123</Good>
      </div>
    )
    // 渲染虚拟dom到页面
    ReactDOM.render(VDOM, document.getElementById("app"))
    /*
      语法规则
        1.定义虚拟dom时不要用‘’号
        2.标签中混入js表达式 用{}号
        3.样式的类名用className指定 不要用class。因为class是es6中类的关键字
        4.内联样式用 style={{color: 'red',fontSize: '50px'}} 是一个对象 key：value格式
        5.只有一个根标签
        6.标签必须是闭合的
        7.标签首字母
          1 若小写开头，转化为html中的同名元素，若HTML中无，则报错
          2 若大写字母开头，react就渲染对应的组件，若没有则报错

    */

  </script>
</body>

</html>